<template>
  	<div id="app">
  		<v-header :scrollTop="scrollTop" ref="vHeader"></v-header>
  		<keep-alive>
      		<router-view @bgChange="bgChange" :scrollTop="scrollTop"></router-view>
    	</keep-alive>
    	<v-footer></v-footer>
  	</div>
</template>

<script>
	import Vheader from 'components/v-header/v-header.vue';
	import Vfooter from 'components/v-footer/v-footer.vue';
	export default {
		data(){
			return {
				scrollTop: 0
			}
		},
		mounted(){
			window.addEventListener('scroll', this.handleScroll);
		},
		methods: {
			handleScroll(){
				this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			},
			bgChange(){
				this.$refs.vHeader.vHeaderBgChange();
			}
		},
		components: {
			'v-header': Vheader,
			'v-footer': Vfooter
		}
	}
</script>